//html 显示经纬度 和搜索 地图
<template>
    <div>
        <el-form>
            <!-- <el-row>
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude">
            <el-input style="width: 200px" disabled v-model="form.longitude"></el-input>
          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="latitude">
            <el-input style="width: 200px" disabled v-model="form.latitude"></el-input>
          </el-form-item></el-col>
      </el-row> -->
            <el-form-item>
                <div class="map-box">
                    <div class="map" ref="map" style="height: 500px" />
                    <!-- <div class="map-search">
            <el-input v-model="searchValue" placeholder="请输入要检索的位置信息" />
            <el-button @click="searchAddress(searchValue)" type="primary">搜索</el-button>
          </div> -->
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { dituqw } from '@/api/index'
export default {

    data() {
        return {
            searchValue: '', //地图搜索
              form: {
                longitude: '118.75489',
                latitude: '32.0342',
              }
        }
    },
    created() {
        if (this.script) return;
        this.script = document.createElement('script');
        this.script.type = 'text/javascript';
        this.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=DWFBZ-VCTKJ-T3BFT-DKKAU-JCAB5-M4BRG`;
        document.head.appendChild(this.script);
        this.script.onload = () => {
            window.initMap = this.initMap;
            this.$nextTick(() => {
                this.initMap();
            });
        };
    },
    methods: {
        // 地图
        initMap() {
            // 搜索类
            //   this.searchEr = new window.TMap.service.Search({ pageSize: 10 });
            // 地图主类
            this.map = new window.TMap.Map(this.$refs.map, {
                backgroundColor: '#f7f7f7',
                mapStyleId: 'style1',
                zoom: 12,
                mapTypeControlOptions: {
                    mapTypeIds: [],
                },
                draggableCursor: 'crosshair',
                center: new window.TMap.LatLng(32.0342, 118.75489),
            });
            // 图层类
            this.markerLayer = new window.TMap.MultiMarker({
                map: this.map,
                geometries: [],
            });
            // 地址逆解析
            this.geocoder = new window.TMap.service.Geocoder();
            const setMarker = (latitude,longitude) => {
                const latlng = new window.TMap.LatLng(latitude, longitude);
                // this.markerLayer.setGeometries([]);
                let geometries = this.markerLayer.getGeometries();
                geometries.push({
                    id: '-1',
                    position: latlng,
                });
                this.markerLayer.updateGeometries(geometries);
            };
            // this.map.on('click', (e) => {
            //     this.form.longitude = e.latLng.getLng(); // 经度
            //     this.form.latitude = e.latLng.getLat(); // 纬度
            //     setMarker();
            //     this.getAddressFormat();
            // });

            this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
            dituqw().then(res => {
                console.log(res);
               
                    res.data.forEach(item => {
                        console.log(1);
                        
                        if (item.latitude && item.longitude) {
                            setMarker(item.latitude,item.longitude);
                        }
                    })

                
            })



        },
        // 地图搜索
        // searchAddress(keyword = '') {
        //     if (!keyword) return;
        //     this.markerLayer.setGeometries([]);
        //     this.searchEr
        //         .searchRectangle({
        //             keyword,
        //             bounds: this.map.getBounds(),
        //         })
        //         .then((result) => {
        //             const { location = {} } = result.data[0] || {};
        //             const { lat = 28.616202, lng = 115.942693 } = location;
        //             this.map.setCenter(new window.TMap.LatLng(lat, lng));
        //             result.data.forEach((item, index) => {
        //                 let geometries = this.markerLayer.getGeometries();
        //                 // 点标注数据数组
        //                 geometries.push({
        //                     id: String(index),
        //                     position: item.location,
        //                 });
        //                 // 绘制地点标注
        //                 this.markerLayer.updateGeometries(geometries);
        //             });
        //         });
        // },
        // getAddressFormat() {
        //     const { longitude, latitude } = this.form;
        //     this.geocoder
        //         .getAddress({
        //             location: new window.TMap.LatLng(latitude, longitude),
        //         })
        //         .then((res) => {
        //             const {
        //                 formatted_addresses: { recommend = '' },
        //             } = res.result || {};
        //             console.log(recommend, 'recommend');
        //             this.form.hotelDetailAddress = recommend;
        //             console.log(this.form);
        //         });
        // },

        // getqwe(){

        // },

    }
    //   mounted(){
    //     this.getqwe()
    //   }
}


</script>
//样式
<style>
.map-box {
    position: relative;

    .map-search {
        z-index: 1000;
        display: flex;
        position: absolute;
        top: 20px;
        left: 20px;
        width: 350px;

        button {
            border-radius: 0;
        }
    }
}

.icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.time {
    margin-top: 15px;
    width: 100%;
    font-size: 12px;
    flex-wrap: wrap;
    height: 70%;
}
</style>
